<template>
  <div style="margin: 20px;">
    <el-row :gutter="10" style="margin-bottom: 60px;margin-top: 30px;">
      <el-col :span="6">
        <el-card style="color: #409EFF">
          <div><i class="el-icon-user-solid" /> 用户id</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{user.id}}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #F56C6C">
          <div><i class="el-icon-money" /> 用户名称</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{user.username}}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67C23A">
          <div><i class="el-icon-bank-card" /> 用户昵称</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{user.nickName}}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #E6A23C" index="/business/person">
          <div><i class="el-icon-s-shop" /> 余额</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{user.account}}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div  class="el-card box-card is-hover-shadow">
      <div class="el-card__header">
        <div  class="clearfix" style="color: rgb(0, 123, 255); font-weight: bold; font-size: 16px;">
          <span >
            <i  class="el-icon-s-help" >使用公告</i>
          </span>
        </div>
      </div>
      <div class="el-card__body">
        <div  class="text item" style="font-size: 14px; width:100%;">
          <p>
            1:请使用电脑浏览器操作,手机端不兼容<br>
            2:请遵守网络相关规定。<br>
            3:感谢使用余姚医疗塑料展销系统,不定期会有优惠活动。<br>
            4:如果遇到问题，请添加管理员微信解决。<br>
          </p>
        </div>
      </div>
    </div>
    <div  class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-lg-12" style=" padding-right: 16px; margin-top: 10px;">
      <div  class="el-card box-card is-hover-shadow">
        <div class="el-card__header">
          <div  class="clearfix" style="color: rgb(0, 123, 255); font-weight: bold; font-size: 16px;">
            <span><i data-v-12e1fa89="" class="el-icon-s-help">扫码进入网页(了解最新动态)</i></span>
          </div></div><div class="el-card__body">
        <div data-v-12e1fa89="" class="text item" style="font-size: 14px;height: 300px;width: 596px;">
          <img data-v-12e1fa89="" src="../assets/wechat1.png" width="250" height="250" class="img-responsive">
        </div>
      </div>
      </div>
    </div>
    <div class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-lg-12" style="padding-left: 16px; padding-right: 16px; margin-top: 10px;">
      <div class="el-card box-card is-hover-shadow">
        <div class="el-card__header">
          <div  class="clearfix" style="color: rgb(0, 123, 255); font-weight: bold; font-size: 16px;">
            <span><i data-v-12e1fa89="" class="el-icon-s-help">添加管理员微信</i>
            </span></div></div><div class="el-card__body">
        <div class="text item" style="font-size: 14px;height: 196px;width: 596px;">
          <img src="../assets/wechat.jpg" width="250" height="250" class="img-responsive">
        </div>
      </div>
      </div>
    </div>

    <!--    <el-row>-->
    <!--      <el-col :span="12">-->
    <!--        <div id="myChart" style="width: 500px; height: 450px"></div>-->
    <!--      </el-col>-->

    <!--      <el-col :span="12">-->
    <!--        <div id="myChart1" style="width: 500px; height: 400px"></div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

  </div>
</template>

<script>
import * as echarts from 'echarts'
import request from "@/utils/request";

export default {
  name: "Home",
  data() {
    return {
      user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    }
  },
  mounted() {
    // this.drawLine()
    this.load()
  },
  methods: {
    load() {
      request.get("/chart", {
        params: {
          id:this.user.id,
          busId: this.user.id
        }
      })
    },
    // drawLine() {
    //   // 基于准备好的dom，初始化echarts实例
    //   let myChart = this.$root.echarts.init(document.getElementById('myChart'))
    //   let option = {
    //     title: {
    //       text: '当前求购产品分类',
    //       subtext: '数据从数据库中获得',
    //       left: 'left'
    //     },
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     legend: {
    //       trigger: 'item'
    //     },
    //     toolbox: {
    //       show: true,
    //       feature: {
    //         mark: {show: true},
    //         dataView: {show: true, readOnly: false},
    //         restore: {show: true},
    //         saveAsImage: {show: true}
    //       }
    //     },
    //     series: [
    //       {
    //         name: 'Access From',
    //         type: 'pie',
    //         radius: '50%',
    //         data: [],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: 'rgba(0, 0, 0, 0.5)'
    //           }
    //         }
    //       }
    //     ]
    //   }
    //   request.get("/chart/count-order").then(res => {
    //     res.data.forEach(item => {
    //       option.series[0].data.push({name: item.classify, value: item.count})
    //     })
    //     // 绘制图表
    //     myChart.setOption(option);
    //   })
    // }
  }
}
</script>

<style scoped>

</style>
